<template>
  <div class="footer">
    <div class="footerBar">
      <div class="left">
        <p>bilbil</p>
        <p>关于我们&nbsp;联系我们&nbsp;用户协议&nbsp;加入我们&nbsp;友情链接</p>
        <p>隐私协议&nbsp;bilbil认证&nbsp;Inverstor&nbsp;Relations</p>
      </div>
      <div class="main">
        <p>传送门</p>
        <p>
          协议汇总&nbsp;活动中心&nbsp;活动专题页&nbsp;侵权申述&nbsp;帮助中心&nbsp;社区中心
        </p>
        <p>
          壁纸站&nbsp;广告合作&nbsp;名人堂&nbsp;MNC管理中心&nbsp;高级弹幕&nbsp;品牌号官网
        </p>
      </div>

      <div class="right">
        <div class="down">
          <div class="img"></div>
        </div>
        <div class="free">
          <div class="img"></div>
        </div>
        <div class="officeWeibo">
          <div class="img"></div>
        </div>
        <div class="officeWechat">
          <div class="img"></div>
        </div>
      </div>
    </div>
    <hr style="width: 80%; margin: 2rem auto" />

    <div class="footerDetail">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam sapiente
      quis reprehenderit, odio autem voluptate cumque, eligendi incidunt maiores
      eos, minus necessitatibus at illo explicabo delectus ad molestiae.
      Voluptas, et! Fuga laborum natus exercitationem. Aliquid illum nam sed
      quaerat dolore perferendis saepe sint quisquam, sed dicta modi possimus
      quo quis dolores incidunt eos tempora, veritatis cupiditate? Porro minima
      voluptatem temporibus molestias eaque pariatur, distinctio doloremque ab.
      Hic soluta obcaecati sunt, odit quae quibusdam velit, quidem earum cum,
      perspiciatis iusto possimus modi atque voluptatem? Autem, et rerum! Ipsum
      veritatis eveniet quae inventore? Deserunt cupiditate facilis molestias?
    </div>

    <div class="sliderToTop">
      <el-backtop :bottom="100">
        <div
          style="
            height: 100%;
            width: 100%;
            background-color: var(--el-bg-color-overlay);
            box-shadow: var(--el-box-shadow-lighter);
            text-align: center;
            line-height: 40px;
            color: #1989fa;
          "
        >
          UP
        </div>
      </el-backtop>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.footer {
  width: 100%;
  background-color: rgba(243, 243, 243, 0.637);
  .footerBar {
    width: 80%;
    height: 12vh;
    display: flex;
    justify-content: space-between;
    line-height: 30px;
    margin: 0rem auto;
    padding: 2rem 0;
    font-size: 0.9rem;
    .left,
    .main {
      p:nth-child(1) {
        color: gray;
        font-size: 0.85rem;
      }
    }
    .left {
      width: 30%;
    }
    .main {
      width: 30%;
    }
    .right {
      width: 30%;
      display: flex;
      justify-content: space-between;
      .down {
        .img {
          width: 70px;
          height: 70px;
          border: 2px solid rgb(50, 14, 255);
          border-radius: 50%;
          &::before {
            content: "下载APP";
            position: relative;
            top: 5rem;
            font-size: 1rem;
          }
        }
      }
      .free {
        .img {
          width: 70px;
          height: 70px;
          border: 2px solid rgb(113, 170, 255);
          border-radius: 50%;
          &::before {
            content: "公益";
            position: relative;
            top: 5rem;
            font-size: 1rem;
          }
        }
      }
      .officeWeibo {
        .img {
          width: 70px;
          height: 70px;
          border: 2px solid rgb(255, 56, 49);
          border-radius: 50%;
          &::before {
            content: "官方微博";
            position: relative;
            top: 5rem;
            font-size: 1rem;
          }
        }
      }
      .officeWechat {
        .img {
          width: 70px;
          height: 70px;
          border: 2px solid rgb(74, 255, 58);
          border-radius: 50%;
          &::before {
            content: "官方微信";
            position: relative;
            top: 5rem;
            font-size: 1rem;
          }
        }
      }
    }
  }
  .footerDetail {
    width: 50%;
    margin: 0 auto;
    color: rgb(158, 158, 158);
  }
}
</style>
